import React from 'react';
import { Input, Icon } from 'antd';
class EditableCell extends React.Component {

  state = {
    value: this.props.value,
    editable: false,
  }

  componentWillReceiveProps(nextprops) {
    const cellType = nextprops.cellType;
    if ((cellType === 'timeStart') && (nextprops.markPoint[0] === nextprops.keys) && (nextprops.markPoint[1] === 0)) {
      this.setState({value: nextprops.value ? ((nextprops.value / 1000).toFixed(3) + 's') : '', editable: true});
    } else if ((cellType === 'timeEnd') && (nextprops.markPoint[0] === nextprops.keys) && (nextprops.markPoint[1] === 1)) {
      this.setState({value: nextprops.value ? ((nextprops.value / 1000).toFixed(3) + 's') : '', editable: true});
    } else {
      this.setState({value: nextprops.value ? ((nextprops.value / 1000).toFixed(3) + 's') : '', editable: false});
    }
  }

  handleChange = (e) => {
    const value = e.target.value ? ((e.target.value / 1000).toFixed(3) + 's') : '';
    this.setState({ value });
  }
  check = (e) => {
    this.setState({ editable: false });
    this.props.changeEditStatus(false);
    this.props.pickPoint([], this.props.tagFilePath, '');
  }
  edit = (e) => {
    if (!this.props.editing) {
      this.props.pickTime(this.props.keys);
      this.setState({ editable: true });
      this.props.changeEditStatus(true);
    } else {
      this.props.modalWarning();
    }
  }
  render() {
    const { value, editable } = this.state;
    return (
      <div className="editable-cell">
        {
          editable ? (
            <Input
              value={value ? value : '请选取点'}
              onChange={this.handleChange}
              onPressEnter={this.check}
              readOnly={true}
              suffix={
                <Icon
                  type="check"
                  className="editable-cell-icon-check"
                  onClick={this.check}
                />
              }
            />
          ) : (
            <div style={{ paddingRight: 24 }}>
              {value || ' '}
              <Icon
                type="edit"
                className="editable-cell-icon"
                onClick={this.edit}
              />
            </div>
          )
        }
      </div>
    );
  }
}

export default EditableCell;